<template>
  <div class="app-container">
    <el-form ref="userInfoRef" :mode="state.user" label-width="80px">
      <el-form-item :label="$t('sysUser.avatar')">
        <JmashSingleImageUpload :picture-url="state.user.avatar" @image-src="imageSrc" />
      </el-form-item>
      <el-form-item :label="$t('sysUser.phoneNumber')">
        <el-input v-model="state.user.mobilePhone" readonly />
      </el-form-item>
      <el-form-item :label="$t('sysUser.email')">
        <el-input v-model="state.user.email" readonly />
      </el-form-item>
      <div class="positon_name">
        <el-row v-for="(item, index) in state.user.userJobs" :key="index" style="width: 100%">
          <el-col :span="12">
            <el-form-item :label="$t('sysUser.department')" :prop="`userJobs.${index}.deptId`">
              <el-tree-select
                v-model="state.user.userJobs![index].deptId"
                :data="deptsArray"
                :render-after-expand="false"
                filterable
                check-strictly
                :placeholder="$t('sysUser.departmentRequired')"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item :label="$t('sysUser.position')" :prop="`userJobs.${index}.jobId`">
              <el-tree-select
                v-model="state.user.userJobs![index].jobId"
                :data="jobsArray"
                :render-after-expand="false"
                filterable
                check-strictly
                :placeholder="$t('sysUser.positionRequired')"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1" v-if="index == 0" class="position-center">
            <el-icon size="16" @click="domainsAdd">
              <CirclePlus />
            </el-icon>
          </el-col>
          <el-col :span="1" v-if="index !== 0" class="position-center">
            <el-icon size="16" @click="domainsRemove(index)">
              <Remove />
            </el-icon>
          </el-col>
        </el-row>
      </div>
      <el-form-item :label="$t('sysUser.nickname')" prop="nickName">
        <el-input
          v-model="state.user.nickName"
          clearable
          :placeholder="$t('sysUser.nicknameRequired')"
        />
      </el-form-item>
      <el-form-item :label="$t('sysUser.fullName')" prop="realName">
        <el-input
          v-model="state.user.realName"
          clearable
          :placeholder="$t('sysUser.fullNameRequired')"
        />
      </el-form-item>
      <el-form-item :label="$t('sysUser.gender')" prop="gender">
        <el-select
          v-model="state.user.gender"
          :placeholder="$t('sysUser.genderRequired')"
          clearable
        >
          <el-option
            v-for="item in Dict.genderEnum.values"
            :key="item.key"
            :label="item.value"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('sysUser.birthday')" prop="birthDate">
        <el-date-picker
          v-model="state.user.birthDate"
          type="date"
          :placeholder="$t('sysUser.birthdayRequired')"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">{{ $t("common.save") }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ProfilePage",
  inheritAttrs: false
});

import { ref, reactive } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { ElMessage } from "element-plus";
import type { FormInstance } from "element-plus";
import { getUserInfoApi, updateUser } from "@/api/auth/index";
import type { UserForm } from "@/api/auth/types";
import { treelistDept } from "@/api/auth/index";
import { treelistJob } from "@/api/auth/index";
import { Dict } from "@/api/dict";

const userInfoRef = ref<FormInstance>();
const deptsArray = ref();
const jobsArray = ref();
let state = reactive({
  user: {
    tenant: useUserStore().user.tenant,
    requestId: Math.random() * 10 + "",
    updateMask: "nickName,gender,birthDate,realName,avatar",
    userJobs: [
      {
        deptId: "",
        jobId: ""
      }
    ]
  } as UserForm
});
function getUser() {
  getUserInfoApi().then(({ data }) => {
    state.user = Object.assign(state.user, { ...data });
    if (state.user.userJobs?.length === 0) {
      state.user.userJobs = [
        {
          deptId: "",
          jobId: ""
        }
      ];
    }
  });
  treelistDept().then(({ data }: any) => {
    deptsArray.value = data.results;
  });
  treelistJob().then(({ data }: any) => {
    jobsArray.value = data.results;
  });
}

function domainsAdd() {
  if (state.user.userJobs && state.user.userJobs.length < 5)
    state.user.userJobs?.push({
      deptId: "",
      jobId: ""
    });
}

function domainsRemove(index: any) {
  state.user.userJobs?.splice(index, 1);
}

function imageSrc(src: string) {
  state.user.avatar = src;
}

const submitForm = () => {
  updateUser(state.user).then((response) => {
    state.user.requestId = Math.random() * 10 + "";
    if (response.status === 200) {
      ElMessage({
        message: "个人信息修改成功",
        type: "success"
      });
    }
  });
};

getUser();
</script>
<style scoped>
.position-center {
  position: absolute;
  right: 2%;
  top: 25%;
  transform: translate(0, -30%);
}

.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.list-group {
  padding-left: 0px;
  list-style: none;
}

.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 15px 0px;
  font-size: 13px;
}

.pull-right {
  float: right !important;
}
</style>
